<template>
    <div>
        <footer>
            <van-tabbar v-model="active" active-color="#ee0a24" inactive-color="gray">
                <van-tabbar-item icon="wap-home"><router-link to="/index">首页</router-link></van-tabbar-item>
                <van-tabbar-item icon="completed"><router-link to="/reservation">预约</router-link></van-tabbar-item>
                <van-tabbar-item icon="shop-collect"><router-link to="/pro">美发产品</router-link></van-tabbar-item>
                <van-tabbar-item icon="card"><router-link to="/j">会员卡</router-link></van-tabbar-item>
              </van-tabbar>
        </footer>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
    export default {
        data(){
            return{
                active:""
            }
        }
    }
</script>

<style scoped>
footer{
    width: 100%;
    height: 44px;
    background: #fff;
}
</style>
